<template>
    <div class="sidebar-wrapper" :class="{ 'dark-mode': isDark }">
        <el-menu
                :default-active="activePath"
                class="el-menu-vertical"
                :collapse="isCollapse"
                :background-color="isDark ? '#2c3e50' : '#f9fafc'"
                :text-color="isDark ? '#ccc' : '#333'"
                :active-text-color="isDark ? '#409EFF' : '#409EFF'"
                router
        >
            <!-- Logo & Title -->
            <div class="logo-container">
                <el-avatar :size="isCollapse ? 40 : 50" :src="personalIcon" class="avatar"/>
                <transition name="fade">
                    <div v-show="!isCollapse" class="title-container">
                        <span class="title">小型工具箱</span>
                    </div>
                </transition>
            </div>

            <!-- 固定项：首页 & 收藏 -->
            <SidebarItem
                    v-for="item in staticItems"
                    :key="item.index"
                    :item="item"
                    :is-collapse="isCollapse"
            />

            <!-- 动态工具项 -->
            <SidebarItem
                    v-for="tool in toolItems"
                    :key="tool.path"
                    :item="{
          index: '/index/' + tool.path,
          icon: toolIconMap[tool.path] || FolderAdd,
          title: tool.toolName
        }"
                    :is-collapse="isCollapse"
            />

            <!-- 收起菜单按钮 -->
            <div class="collapse-btn-wrapper">
                <el-button
                        circle
                        type="text"
                        class="collapse-btn custom-collapse-btn"
                        @click="$emit('toggle')"
                        :aria-label="isCollapse ? '展开菜单' : '收起菜单'"
                        :title="isCollapse ? '展开菜单' : '收起菜单'"
                >
                    <el-icon>
                        <component :is="isCollapse ? ArrowRight : ArrowLeft"/>
                    </el-icon>
                </el-button>
            </div>

            <el-divider class="menu-divider"/>
        </el-menu>
    </div>
</template>

<script setup>
import {ref, onMounted, watch} from "vue";
import {get} from "@/net/index.js";
import personalIcon from "@/assets/personalIcon.jpg";
import {
    House,
    // Star,
    FolderAdd,
    Aim,
    Document,
    Calendar,
    ArrowLeft,
    ArrowRight
} from "@element-plus/icons-vue";
import SidebarItem from "@/components/SidebarItem.vue";
import {useDark} from "@vueuse/core";

const isDark = useDark();

defineProps({
    isCollapse: Boolean,
    activePath: String,
});

defineEmits(["logout", "toggle"]);

const staticItems = [
    {index: "/index/home", icon: House, title: "首页"},
    // { index: "/index/Collection", icon: Star, title: "我的收藏" },
];

const toolIconMap = {
    CodeTool: Aim,
    LifeTool: Calendar,
    TextTool: Document,
    MathTool: FolderAdd,
};

const toolItems = ref([]);

onMounted(() => {
    get("/api/toolKit/getToolList", (data) => {
        toolItems.value = data;
    });
});

watch(isDark, (newValue) => {
    if (newValue) {
        document.body.classList.add("dark-mode");
    } else {
        document.body.classList.remove("dark-mode");
    }
});
</script>

<style scoped>
.sidebar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-right: 1px solid #e4e7ed;
    transition: background-color 0.3s ease;
}

/* 让菜单撑满剩余空间并支持滚动 */
::v-deep(.el-menu-vertical) {
    flex-grow: 1;
    overflow-y: auto;
    padding-top: 1rem;
    box-sizing: border-box;
}

.logo-container {
    display: flex;
    align-items: center;
    padding: 0 1rem 1rem 1rem;
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 1rem;
    user-select: none;
}

.dark-mode .logo-container {
    background-color: #2c3e50;
    color: white;
}

::v-deep(.el-menu-item) {
    font-weight: 300;
    font-size: 1.1rem;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode ::v-deep(.el-menu-item) {
    color: #ccc;
}

::v-deep(.el-menu-item.is-active) {
    color: #409eff;
    background-color: transparent;
    font-weight: 300;
}

.dark-mode ::v-deep(.el-menu-item.is-active) {
    color: #1abc9c;
}

::v-deep(.el-menu-item:hover) {
    background-color: #f0f6ff;
    color: #409eff;
}

.dark-mode ::v-deep(.el-menu-item:hover) {
    background-color: #34495e;
    color: #1abc9c;
}

::v-deep(.el-icon) {
    font-size: 20px;
    color: inherit;
}

/* 新增收起按钮容器 */
.collapse-btn-wrapper {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0;
    border-top: 1px solid #ebeef5;
    user-select: none;
}

/* 收起按钮样式 */
.collapse-btn {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    line-height: 1;
}

.custom-collapse-btn {
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}

.custom-collapse-btn:hover {
    color: #409eff;
}

/* 深色模式下按钮颜色变白 */
.dark-mode .custom-collapse-btn {
    color: white;
}

.dark-mode .custom-collapse-btn:hover {
    color: #409eff;
}

</style>